<template>
    <div>
        <!-- 先布局，再对接口 -->
        <div>
            <div>8月18日</div>
            <el-row :gutter="20">
                <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
        </div>
        <div>
            <div>截至：{{endTime}}</div>
            <el-row :gutter="20">
                <el-col :span="8" v-for="item in listData" :key='item.id'>
                    <div class="grid-content bg-purple" style="color:#ff6900;font-weight:700">{{item.num}}</div>
                    <div class="grid-content bg-purple">{{item.name}}</div>
                </el-col>
            </el-row>
        </div>
        <div class="table">
            <!-- {{tableData}} -->
            <div>国内疫情</div>
            <el-row>
                <el-col :span="4"><div class="grid-content bg-purple" style="background-color: #e0e1fd">地区</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-light" style="background-color: #dd837f">新增确诊</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple" style="background-color: #f4d3aa">新增疑似</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-light" style="background-color: #fdcccb">新增死亡</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple" style="background-color: #c5eab4">新增治愈</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-light" style="background-color: #d2d2d2">境外输入</div></el-col>
            </el-row>
            <el-row class="bottom_div" v-for='item in tableData' :key='item.id'>
                <el-col :span="4">
                    <div class="grid-content">{{item.province}}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">{{item.confirmed}}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">{{item.suspected}}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">{{item.dead}}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">{{item.cure}}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">{{item.outside}}</div>
                </el-col>
            </el-row>
        </div>
        <div>   
            <div>最新进展</div>
            <div style="background-color: #f8f8f8;padding:20px 10px" v-for="item in latest_news" :key="item.id" @click="showDetail(item)">
                <div class="circle"></div>
                <div class="tag">最新</div>
                <div class="time">{{item.publishTime|dateFMT}}</div>
                <div class="content">{{item.title}}</div>
            </div>
        </div>

        <!-- 模态框 -->
        <el-dialog title="新闻资讯" :visible.sync="dialogTableVisible">
            <!-- v-html可以将变量解析出来 -->
            <div v-html="dialogData.content"></div>
        </el-dialog>
    </div>
</template>

<script>
import axios from '@/http/axios'
import moment from 'moment'
export default {
    data(){
        return {
            params:{
                page:1,
                pageSize:10000
            },
            // 列表数据
            listData:[],
            endTime:'',
            // 表格数据
            tableData:[],
            // 最新新闻
            latest_news:[],
            dialogTableVisible:false,
            dialogData:{}
        }
    },
    // 过滤器
    filters:{
        dateFMT(str){
            return moment(str).format('YYYY 年 MM 月 DD 日')
        }
    },
    created(){
        this.queryAll()
        this.queryNews()
    },
    methods:{
        // 显示新闻详情
        showDetail(item){
            this.dialogData=item
            // 显示模态框
            this.dialogTableVisible=true
        },
        // 查询最新新闻动态
        queryNews(){
            let obj = {
                page:1,
                pageSize:10,
                categoryId:3
            }
            axios({
                url:'http://121.199.29.84:8001/article/pageQuery',
                method:'get',
                params:obj,

            }).then((res)=>{
                this.latest_news = res.data.data.list
            })
        },
        queryAll(){
            axios({
                url:'http://121.199.29.84:8001/epidemic/pageQuery',
                method:'get',
                params:this.params,
            }).then((res)=>{
                // 封装表格数据
                this.tableData = res.data.data.list
                // 封装截至时间
                this.endTime = moment(res.data.data.list[0].inputTime).format('YYYY 年 MM 月 DD 日 HH 点 mm 分 ss 秒')
                var confirmed_total = 0;
                var dead_total = 0;
                var suspected_total = 0;
                var cure_total = 0;
                var severe_total = 0;
                var outside_total = 0;
                res.data.data.list.forEach((item) => {
                    confirmed_total += item.confirmed;
                    dead_total += item.dead;
                    suspected_total += item.suspected;
                    cure_total += item.cure;
                    severe_total += item.severe;
                    outside_total += item.outside;
                });
                var obj1 = {
                    id:1,
                    name:'现有确诊',
                    num:confirmed_total
                }
                var obj2 = {
                    id:2,
                    name:'现有重症',
                    num:suspected_total
                }
                var obj3 = {
                    id:3,
                    name:'累计出院',
                    num:cure_total
                }
                var obj4 = {
                    id:4,
                    name:'累计境外输入',
                    num:outside_total
                }
                var obj5 = {
                    id:5,
                    name:'累计存活',
                    num:severe_total
                }
                var obj6 = {
                    id:6,
                    name:'累计死亡',
                    num:dead_total
                }
                this.listData.push(obj1,obj2,obj3,obj4,obj5,obj6)
            })
        }
    
    }
}
</script>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .circle{
      height: 10px;
      width: 10px;
      border-radius: 50%;
      background-color: blue;
  }
  .tag{
      background-color: red;
      font-size: 14px;
      color: cornsilk;
      padding: 4px;
      border-radius: 5px;
  }
  .time{
      font-weight: 600;
  }
  .circle,.tag,.time{
      display: inline-block;
      margin-right: 10px;
  }
  .content{
      margin-top: 5px;
      background-color: white;
      padding: 10px;
      border-radius: 5px;
  }
  .bottom_div div{
      border-bottom: 1px solid #ededed;
  }
  .table .el-row{
      margin-bottom: 0;
  }
  .table .el-col{
      margin-bottom: 0;
  }
  .el-col {
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    /* border-radius: 4px; */
    min-height: 36px;
    line-height: 36px;
    text-align: center;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>